<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Tutorials for Designers</title>

<style type="text/css">
body {
	margin: 30px auto;
	padding: 0;
	width: 650px;
	font: 75%/160% Arial, Helvetica, sans-serif;
	color: #333333;
}
code {
	font: 120% "Courier New", Courier, monospace;
	white-space: nowrap;
	color: #6666CC;
}
p {
	margin: 0;
	padding: 0 0 1em;
}
a {
	color: #FF3300;
}
h1 {
	font: bold 260%/100% Arial, Helvetica, sans-serif;
	margin: 0 0 10px;
	padding: 0;
	letter-spacing: -2px;
}
h2 {
	font: normal 140%/130% Arial, Helvetica, sans-serif;
	color: #666666;
}
h3 {
	font: bold 140%/130% Arial, Helvetica, sans-serif;
	color: #000;
	margin: 0;
	padding: 20px 0 5px;
}
h3 a {
	color: #000;
	text-decoration: none;
}
h3 a:hover {
	color: #FF3300;
}
iframe {
	border-top: solid 1px #999;
	border-left: solid 1px #999;
	border-right: solid 1px #333;
	border-bottom: solid 1px #333;
	margin: 10px 0 20px;
}
</style>
</head>

<body>
<h1>jQuery for Designers</h1>
<h2>Here are 10 visual exmples to demonstrate on how to use jQuery to enchance user experience and semantic web design (view original <a href="http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/">jQuery Tutorials</a>).</h2>
<h2>Another awesome tutorial by <a href="http://www.webdesignerwall.com">Web Designer Wall</a>.</h2>
<h3><a href="simple-slide-panel.html">1. Simple Slide Panel</a></h3>
<iframe src="simple-slide-panel.html" frameborder="0" scrolling="auto" width="630px" height="270px"></iframe>

<h3><a href="simple-disappear.html">2. Simple Disappear</a></h3>
<iframe src="simple-disappear.html" frameborder="0" scrolling="auto" width="630px" height="270px"></iframe>

<h3><a href="chainable-effects.html">3. Chainable Effects</a></h3>
<iframe src="chainable-effects.html" frameborder="0" scrolling="auto" width="630px" height="320px"></iframe>

<h3><a href="accordion1.html">4a. Accordion 1</a></h3>
<iframe src="accordion1.html" frameborder="0" scrolling="auto" width="630px" height="290px"></iframe>

<h3><a href="accordion2.html">4b. Accordion 2</a></h3>
<p>This one lets you specify which panel to open as default.</p>
<iframe src="accordion2.html" frameborder="0" scrolling="auto" width="630px" height="290px"></iframe>

<h3><a href="animated-hover1.html">5a. Animated Hover 1</a></h3>
<iframe src="animated-hover1.html" frameborder="0" scrolling="auto" width="630px" height="170px"></iframe>

<h3><a href="animated-hover2.html">5b. Animated Hover 2</a></h3>
<p>This will get the <code>title</code> attribute and append it to the hover text.</p>
<iframe src="animated-hover2.html" frameborder="0" scrolling="auto" width="630px" height="170px"></iframe>

<h3><a href="block-clickable.html">6. Entire Block Clickable</a></h3>
<p>This will make entire block element clickable (see live demo on <a href="http://bestwebgallery.com">Best Web Gallery</a>).</p>
<iframe src="block-clickable.html" frameborder="0" scrolling="auto" width="630px" height="270px"></iframe>

<h3><a href="collapsible-panels.html">7. Collapsible Panels</a></h3>
<p>This example shows you how to imitate the Gmail inbox panels.</p>
<iframe src="collapsible-panels.html" frameborder="0" scrolling="auto" width="630px" height="450px"></iframe>

<h3><a href="wordpress-comments.html">8. Imitate the WordPress Comment Management</a></h3>
<p>This one requires the <a href="http://plugins.jquery.com/project/color">Color Animations</a> plugin.</p>
<iframe src="wordpress-comments.html" frameborder="0" scrolling="auto" width="630px" height="530px"></iframe>

<h3><a href="img-replacement.html">9. Image Replacement Gallery</a></h3>
<p>Replace the <code>img src</code> attribute with the <code>a href</code> attribute.</p>
<iframe src="img-replacement.html" frameborder="0" scrolling="auto" width="630px" height="630px"></iframe>

<h3><a href="link-types.html">10. Link Type Styling</a></h3>
<iframe src="link-types.html" frameborder="0" scrolling="auto" width="630px" height="210px"></iframe>

</body>
</html>
